<template>
  <div>
    <p>{{ title }}</p>
    <table>
      <tr>
        <td>{{ fruit }}</td>
      </tr>
      <tr>
        <td>
          请输入购买斤数：
          <input v-model="count" type="text" name="" id="" />
        </td>
      </tr>
      <tr>
        <td><button @click="buy">结账买单~</button></td>
      </tr>
      <tr>
        <td>
          结账单：总价：{{ total }}￥元,折后价：{{ price }}￥元 省了：{{
            save
          }}￥元
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: "欢迎光临",
      fruit: "苹果 10￥/斤，折扣<8>折",
      count: "",
      total: "0",
      price: "0",
      save: "0",
    };
  },
  methods: {
    buy() {
      // 总价
      this.total = this.count * 10;
      // 折后价
      this.price = this.total * 0.8;
      // 省多少
      this.save = this.total - this.price;
    },
  },
};
</script>

<style>
p {
  margin-left: 150px;
}
table td {
  text-align: center;
  border: 1px solid #000;
}
</style>